<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="数据绑定对象">
                <el-select v-model="propJson.tableDataVariable" placeholder="参数名称" style="width: 100%">
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>

            <el-form-item label="是否设置边框线">
                <el-radio-group v-model="propJson.isBorder">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否设置斑马纹">
                <el-radio-group v-model="propJson.isStripe">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否设置溢出提示">
                <el-radio-group v-model="propJson.isOverFlowTip">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否设置表格最大高度">
                <el-radio-group v-model="propJson.isMaxHeight">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="表格最大高度" v-if="propJson.isMaxHeight">
                <el-input v-model="propJson.maxHeight" style="width: 100%" placeholder="表格最大高度" />
            </el-form-item>

            <el-form-item label="是否可添加">
                <el-radio-group v-model="propJson.isAddData">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否可删除">
                <el-radio-group v-model="propJson.isDeleteData">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否添加复选框">
                <el-radio-group v-model="propJson.isSelection">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="复选框关联对象名称" v-if="propJson.isSelection">
                <el-select v-model="propJson.selectVarParamName" placeholder="变量名称" style="width: 100%">
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>

            <el-form-item label="是否开启内嵌表格">
                <el-radio-group v-model="propJson.isSonTable">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否可添加内嵌表格" v-if="propJson.isSonTable">
                <el-radio-group v-model="propJson.isAddSonTable">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="子表格字段名称" v-if="propJson.isSonTable">
                <el-input v-model="propJson.sonTableName" style="width: 100%" placeholder="子表格字段名称" />
            </el-form-item>

            <el-form-item label="子表格标识名称" v-if="propJson.isSonTable">
                <el-input v-model="propJson.sonTableTypeName" style="width: 100%" placeholder="子表格标识名称" />
            </el-form-item>

            <el-form-item label="是否启用动态表格列">
                <el-radio-group v-model="propJson.isDynamicColumns">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider v-if="propJson.isDynamicColumns">动态列获取</el-divider>

            <CommonThirdServiceValue v-if="propJson.isDynamicColumns" :actionInfo="propJson.dynamicColumnsInfo ? propJson.dynamicColumnsInfo : {}" :commonParam="commonParam" />


            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addColVariable()">添加表格列字段</el-button>
            </div>

            <el-form :model="propJson" label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="index" v-for="(item, index) in propJson.tableFieldList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>字段 {{(index + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteColVariable(index)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="字段名称">
                            <el-input v-model="item.variableLabel" style="width: 100%" placeholder="字段名称"/>
                        </el-form-item>

                        <el-form-item label="字段名称 - 英文">
                            <el-input v-model="item.variableLabelEN" style="width: 100%" placeholder="字段名称"/>
                        </el-form-item>
                        <el-form-item label="字段绑定的对象属性">
                            <el-input v-model="item.variableField" style="width: 100%" placeholder="字段绑定的对象属性"/>
                        </el-form-item>
                        <el-form-item label="字段对齐方式">
                            <el-radio-group v-model="item.isAlignCenter">
                                <el-radio label="left">左侧</el-radio>
                                <el-radio label="center">居中</el-radio>
                                <el-radio label="right">右侧</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="字段是否可编辑">
                            <el-radio-group v-model="item.isEditor">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="编辑类型" v-if="item.isEditor">
                            <el-radio-group v-model="item.editorType">
                                <el-radio label="input">输入框</el-radio>
                                <el-radio label="dropDown">下拉框</el-radio>
                                <el-radio label="switch">滑块</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="是否禁用">
                            <el-radio-group v-model="item.isDisable">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="下拉选择Label字段" v-if="item.isEditor && item.editorType === 'dropDown'">
                            <el-input v-model="item.optionLabel" style="width: 100%" placeholder="从对象中获取 $.label" />
                        </el-form-item>

                        <el-form-item label="下拉选择Value字段" v-if="item.isEditor && item.editorType === 'dropDown'">
                            <el-input v-model="item.optionValue" style="width: 100%" placeholder="从对象中获取 $.label" />
                        </el-form-item>

                        <el-form-item label="是否点击触发下拉查询" v-if="item.isEditor && item.editorType === 'dropDown'">
                            <el-radio-group v-model="item.isOptionClickAction">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-divider v-if="item.isEditor && item.editorType === 'dropDown'">下拉选项值</el-divider>

                        <CommonThirdServiceValue v-if="item.isEditor && item.editorType === 'dropDown'" :actionInfo="item.actionInfo ? item.actionInfo : {}" :commonParam="commonParam" />
                    </el-collapse-item>
                </el-collapse>
            </el-form>
        </el-form>
    </div>
</template>

<script name="EditableTableListDrawer" setup lang="ts">
import CommonThirdServiceValue from '@/components/lowcode/service/CommonThirdServiceValue.vue'
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

function addColVariable() {
    let variableInfo = {variableLabel: "", variableLabelEN: "",  variableField: "", isAlignCenter: "left", isEditor: false, editorType: "input",
        optionLabel: "$.label", // 下拉菜单label
        optionValue: "$.value", // 下拉菜单value
        actionInfo: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "Array", optionsVariableParam: "",
            apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: ""},
    }
    propJson.value.tableFieldList.push(variableInfo)
}

function deleteColVariable(index) {
    // 删除数组中的数据
    propJson.value.tableFieldList.splice(index, 1);
}
</script>

<style scoped lang="less">

</style>